<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8位二进制计数器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            padding: 20px;
        }
        
        .container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            padding: 40px;
            max-width: 800px;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .description {
            color: #34495e;
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        .binary-display {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .bit-container {
            margin: 0 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .bit {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            font-weight: bold;
            background-color: #3498db;
            color: white;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .bit.active {
            background-color: #e74c3c;
            transform: scale(1.05);
        }
        
        .bit-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .bit-weight {
            font-size: 1.2rem;
            color: #7f8c8d;
            font-weight: 500;
        }
        
        .controls {
            margin: 30px 0;
        }
        
        .btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            margin: 0 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .btn:hover {
            background-color: #27ae60;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-minus {
            background-color: #e74c3c;
        }
        
        .btn-minus:hover {
            background-color: #c0392b;
        }
        
        .decimal-display {
            background-color: #f1c40f;
            color: #2c3e50;
            padding: 20px;
            border-radius: 15px;
            margin-top: 30px;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .decimal-value {
            font-size: 2.5rem;
            color: #e74c3c;
            margin: 0 5px;
        }
        
        .explanation {
            margin-top: 30px;
            padding: 20px;
            background-color: #ecf0f1;
            border-radius: 15px;
            text-align: left;
        }
        
        .explanation h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .explanation p {
            color: #34495e;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        .highlight {
            background-color: #f1c40f;
            padding: 2px 5px;
            border-radius: 4px;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 25px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .bit {
                width: 45px;
                height: 45px;
                font-size: 1.5rem;
            }
            
            .bit-weight {
                font-size: 1rem;
            }
            
            .btn {
                padding: 12px 25px;
                font-size: 1.1rem;
                margin: 0 10px;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .bit {
                width: 35px;
                height: 35px;
                font-size: 1.2rem;
                margin: 0 4px 8px;
            }
            
            .bit-weight {
                font-size: 0.8rem;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 1rem;
                margin: 5px;
            }
            
            .decimal-display {
                font-size: 1.2rem;
            }
            
            .decimal-value {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>8位二进制计数器</h1>
        
        <p class="description">
            这个工具展示了8位二进制数与十进制数的转换关系。点击"加1"或"减1"按钮来操作二进制数，
            或者直接点击二进制位进行切换。每个二进制位下方显示了该位的十进制权重。
        </p>
        
        <div class="binary-display" id="binaryDisplay">
            <!-- 二进制位将通过JavaScript动态生成 -->
        </div>
        
        <div class="controls">
            <button class="btn btn-minus" id="btnMinus">-1</button>
            <button class="btn" id="btnPlus">+1</button>
        </div>
        
        <div class="decimal-display">
            十进制值: <span class="decimal-value" id="decimalValue">0</span>
        </div>
        
        <div class="explanation">
            <h3>二进制转十进制原理</h3>
            <p>二进制数转换为十进制数的公式为：</p>
            <p>D = d<sub>7</sub>×2<sup>7</sup> + d<sub>6</sub>×2<sup>6</sup> + ... + d<sub>0</sub>×2<sup>0</sup></p>
            <p>其中 d<sub>i</sub> 是二进制数的第 i 位（从右向左，从0开始计数）。</p>
            <p>例如：二进制数 <span class="highlight">00011010</span> = 
                0×128 + 0×64 + 0×32 + 1×16 + 1×8 + 0×4 + 1×2 + 0×1 = 
                <span class="highlight">26</span></p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 二进制权重数组（128, 64, 32, 16, 8, 4, 2, 1）
            const weights = [128, 64, 32, 16, 8, 4, 2, 1];
            let binaryValue = [0, 0, 0, 0, 0, 0, 0, 0]; // 初始值全为0
            let decimalValue = 0;
            
            const binaryDisplay = document.getElementById('binaryDisplay');
            const decimalValueElement = document.getElementById('decimalValue');
            
            // 初始化二进制显示
            function initBinaryDisplay() {
                binaryDisplay.innerHTML = '';
                
                weights.forEach((weight, index) => {
                    const bitContainer = document.createElement('div');
                    bitContainer.className = 'bit-container';
                    
                    const bitElement = document.createElement('div');
                    bitElement.className = `bit ${binaryValue[index] === 1 ? 'active' : ''}`;
                    bitElement.textContent = binaryValue[index];
                    bitElement.dataset.index = index;
                    
                    const bitValueElement = document.createElement('div');
                    bitValueElement.className = 'bit-value';
                    bitValueElement.textContent = `位${7-index}`;
                    
                    const bitWeightElement = document.createElement('div');
                    bitWeightElement.className = 'bit-weight';
                    bitWeightElement.textContent = weight;
                    
                    bitContainer.appendChild(bitValueElement);
                    bitContainer.appendChild(bitElement);
                    bitContainer.appendChild(bitWeightElement);
                    
                    binaryDisplay.appendChild(bitContainer);
                    
                    // 添加点击事件
                    bitElement.addEventListener('click', function() {
                        toggleBit(parseInt(this.dataset.index));
                    });
                });
                
                updateDecimalValue();
            }
            
            // 切换单个位
            function toggleBit(index) {
                binaryValue[index] = binaryValue[index] === 0 ? 1 : 0;
                updateBinaryDisplay();
                updateDecimalValue();
            }
            
            // 更新二进制显示
            function updateBinaryDisplay() {
                const bits = document.querySelectorAll('.bit');
                bits.forEach((bit, index) => {
                    bit.textContent = binaryValue[index];
                    bit.className = `bit ${binaryValue[index] === 1 ? 'active' : ''}`;
                });
            }
            
            // 更新十进制值
            function updateDecimalValue() {
                decimalValue = binaryValue.reduce((acc, val, index) => {
                    return acc + (val * weights[index]);
                }, 0);
                
                decimalValueElement.textContent = decimalValue;
            }
            
            // 加1操作
            function incrementBinary() {
                let carry = 1;
                
                for (let i = 7; i >= 0; i--) {
                    if (binaryValue[i] === 0 && carry === 1) {
                        binaryValue[i] = 1;
                        carry = 0;
                    } else if (binaryValue[i] === 1 && carry === 1) {
                        binaryValue[i] = 0;
                        carry = 1;
                    }
                    
                    if (carry === 0) break;
                }
                
                updateBinaryDisplay();
                updateDecimalValue();
            }
            
            // 减1操作
            function decrementBinary() {
                let borrow = 1;
                
                for (let i = 7; i >= 0; i--) {
                    if (binaryValue[i] === 1 && borrow === 1) {
                        binaryValue[i] = 0;
                        borrow = 0;
                    } else if (binaryValue[i] === 0 && borrow === 1) {
                        binaryValue[i] = 1;
                        borrow = 1;
                    }
                    
                    if (borrow === 0) break;
                }
                
                updateBinaryDisplay();
                updateDecimalValue();
            }
            
            // 添加按钮事件
            document.getElementById('btnPlus').addEventListener('click', incrementBinary);
            document.getElementById('btnMinus').addEventListener('click', decrementBinary);
            
            // 添加键盘事件支持
            document.addEventListener('keydown', function(event) {
                if (event.key === '+' || event.key === 'ArrowUp') {
                    incrementBinary();
                } else if (event.key === '-' || event.key === 'ArrowDown') {
                    decrementBinary();
                }
            });
            
            // 初始化显示
            initBinaryDisplay();
        });
    </script>
</body>
</html>